import React, {useState} from 'react'
import {KeyOutlined, LockOutlined, UserOutlined} from '@ant-design/icons';
import {Button, Form, Image, Input} from 'antd';
import styled from "@emotion/styled";
import loginBg from 'assets/images/login.jpg'
import {reqCode} from "api";
import {useAuth, useMount} from "utils";
import {useAsync} from "utils/useAsync";

export interface AuthForm {
    username: string,
    password: string,
    code: string,
    key: string,
}

export default function Login() {
    const [code, setCode] = useState({
        imgUrl: '',
        key: ''
    })
    const {run} = useAsync()
    const {login, getInfo} = useAuth()
    const onFinish = async (values: AuthForm) => {
        const res = await run(login({...values, key: code.key}))
        if (res !== undefined) {
            await getCode()
            setTimeout(() => {
                const codeEl = document.querySelector('#codeEl') as HTMLInputElement
                codeEl.value = ''
                codeEl.focus()
            }, 200)
        } else {
            run(getInfo())
        }
    };
    const getCode = async () => {
        const res = await run(reqCode())
        setCode({
            imgUrl: res.base64,
            key: res.key,
        })
    }
    useMount(() => getCode())
    return (
        <Container>
            <div/>
            <ContainerForm>
                <h2>登录Login...</h2>
                <Form
                    initialValues={{remember: true}}
                    onFinish={onFinish}
                >
                    <Form.Item
                        name="username"
                        rules={[{required: true, message: '请输入用户名'}]}
                    >
                        <Input prefix={<UserOutlined/>} placeholder="请输入用户名"/>
                    </Form.Item>
                    <Form.Item
                        name="password"
                        rules={[{required: true, message: '请输入密码'}]}
                    >
                        <Input
                            prefix={<LockOutlined/>}
                            type="password"
                            placeholder="请输入密码"
                        />
                    </Form.Item>
                    <Form.Item
                        name="code"
                        rules={[{
                            required: true,
                            message: "请输入验证码",
                        }]}
                    >
                        <ContainerCode>
                            <Input
                                prefix={<KeyOutlined/>}
                                type="code"
                                placeholder="请输入验证码"
                                style={{marginRight: '2rem'}}
                                id={'codeEl'}
                            />
                            {code.imgUrl ? (
                                <Image
                                    onClick={getCode}
                                    preview={false}
                                    src={code.imgUrl}
                                    width={160}
                                    // height={40}
                                />
                            ) : null}
                        </ContainerCode>
                    </Form.Item>
                    <Form.Item>
                        <Button type="primary" htmlType="submit" className="login-form-button"
                                style={{
                                    width: '100%'
                                }}>
                            登录
                        </Button>
                    </Form.Item>
                </Form>
            </ContainerForm>
        </Container>
    );
};
const Container = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  background-size: 100% 100%;
  background-image: url(${loginBg});
`
const ContainerForm = styled.div`
  Width: 40rem;
  box-shadow: 0 1rem 2rem 0 rgba(0, 0, 0, 0.05);
  background-color: rgb(255, 255, 255);
  border-radius: 10px;
  padding: 3rem;
  transform: translate(50%, 0%)
`
const ContainerCode = styled.div`
  display: flex;
  justify-content: space-between;

`